<template>
	<view>
        <!-- 搜索栏 -->
		<uni-search-bar radius="5" v-model="inputs"  @focus="clickMain" placeholder="搜索新闻" clearButton="auto" cancelButton="none" />
		<!-- 滑动操作 -->
		<uni-swipe-action>
			<!-- 画家列表 -->
			<uni-list class="list-news" v-for="(item,index) of listPainter" :key="index">
				<view class="search">
					<uni-swipe-action-item>
						<image :src="item.headUrl" mode="aspectFit" class="image-news"></image>
						<view class="time-news">浏览量：{{item.browseNum}}</view>
						<view class="title-news">画家：{{item.painterName}}</view>
					</uni-swipe-action-item>
				</view>
			</uni-list>
			
			<!-- 文章列表 -->
			<uni-list class="list-news" v-for="(item,index) of listArticle" :key="index">
				<view class="search">
					<uni-swipe-action-item>
						<image :src="item.picUrl" mode="aspectFit" class="image-news"></image>
						<view class="time-news">浏览量：{{item.browseNum}}</view>
						<view class="title-news">文章：{{item.titles}}</view>
					</uni-swipe-action-item>
				</view>
			</uni-list>
			
			<!-- 展览列表 -->
			<uni-list class="list-news" v-for="(item,index) of listExhibition" :key="index">
				<view class="search">
					<uni-swipe-action-item>
						<image :src="item.eventPoster" mode="aspectFit" class="image-news"></image>
						<view class="time-news">浏览量：{{item.browseMum}}</view>
						<view class="title-news">艺术展：{{item.exhibitioTitel}}</view>
					</uni-swipe-action-item>
				</view>
			</uni-list>
		</uni-swipe-action>
		
		<view class="bottom"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>

<script>
import global from '@/global.js'

export default {
	data() {
		return {
			listPainter:[],
			listArticle:[],
			listExhibition:[],
			word:'',
			// 搜索栏值
			inputs: '',
			//当前选项卡
			currentTab: '/pages/search/searchCategoryList'
		}
	},
	computed: {
		// 搜索
		chatss() {
			return this.chat.filter(item => {
				// console.log(item)
				return item.title.indexOf(this.inputs) >= 0
			})
		}
	},
	methods: {
		clickMain(){
			uni.navigateTo({
				url: '/pages/search/search',
			});
		},
		search(keyword){
			console.log("onload search searchCategoryList keyword : " , keyword)
			uni.request({
						url: global.baseUrl + 'api/search/result', // 接口地址
						method:'get',
						dataType: "json",
						data:{
							keyword: keyword
						},
						header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						},
						success: (res) => {
							if(res.data.code==0){
								console.log("res.data.data ：  ", res.data.data)
								this.listPainter=res.data.data.listPainter,
								this.listArticle=res.data.data.listArticle,
								this.listExhibition=res.data.data.listExhibition
							}else{
								console.log("request result error: " ,res.data.code)
							}
						},
						fail: (error) => {
						  console.log(error)
						}
			})
		}
	},
	onLoad(option) {
		console.log('接收到的参数', option.inputs); // 输出{ paramName: 'value' }
		console.log("onLoad option word  :   ", option.inputs)
		this.search(option.inputs) // 在页面加载时调用fetchData方法获取数据
	}
}
</script>

<style scoped>
	.list-news {
		width: 94%;
		margin: auto;
	}
 
	.search {
		margin-top: 10rpx;
		position: relative;
		height: 210rpx;
	}
 
	.image-news {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
	}
 
	.time-news {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
 
	.title-news {
		width: 480rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		position: absolute;
		bottom: 10rpx;
		left: 220rpx;
	}
</style>

